<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <div>
          <el-button type="primary" :icon="Plus" @click="addDialog">新增</el-button>
        </div>
      </div>
    </template>
    <el-table v-loading="loading" :data="tableData" style="width: 100%" height="500"
              :default-sort="{ prop: 'date', order: 'descending' }"
              row-key="authorityName" :default-expand-all="false" >
      <!--      <el-table-column fixed type="selection" width="55"/>-->
      <!--      <el-table-column prop="id" label="编号" width="60"/>-->
      <el-table-column prop="authorityName" label="权限名称" width="200" show-overflow-tooltip/>
      <el-table-column prop="authority" label="标签" width="200" show-overflow-tooltip/>
      <el-table-column prop="parentPermitName" label="父类权限" width="200" show-overflow-tooltip/>
      <el-table-column prop="permitIntro" label="权限描述" show-overflow-tooltip/>
      <el-table-column prop="sortFlag" label="排序" width="60" show-overflow-tooltip/>
      <el-table-column prop="remark" label="备注" width="120" show-overflow-tooltip/>
      <el-table-column fixed="right" label="操作" width="220">
        <template #header>
          操作
        </template>
        <template #default="scope">
          <el-button link type="danger" :icon="Delete" size="small" @click="showDeleteDialog(scope.row.id)">删除
          </el-button>
          <el-button link type="primary" :icon="Edit" size="small" @click="editDialog(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 新增或者修改页面-->
  <PermitAddOrEdit @closeEditDialog="closeEditDialog" :addOrEditVisible="addOrEditVisible" :ruleForm="ruleForm"
                   :addDataType="addDataType"></PermitAddOrEdit>
</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
import type {TableColumnCtx} from 'element-plus/es/components/table/src/table-column/defaults'
import {onMounted, computed, reactive, ref, toRef, watch} from 'vue'
import {Params} from "@/apis/model/common/common.interfaces"
import {Delete, Edit, Search, Share, Upload, Plus} from '@element-plus/icons-vue'
import PermitAddOrEdit from './PermitAddOrEdit.vue'
import {deletePermitById, permitLoop, permitPage} from "@/apis/http/system/PermitHttp";
import {Permit} from "@/apis/model/system/PermitModel";

const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {} as Permit
})

const ruleForm = ref<Permit>({} as Permit)
// AddOrEditVisible
const addOrEditVisible = ref(false)
// table 表数据
const tableData: any = ref<Array<Permit>>([])
// 加载数据
const loading = ref(true)
const addDataType = ref('add');

/**
 * 初始化数据
 */
const initList = () => {
  loading.value = true
  permitLoop({}).then(res => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  });
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {
  addOrEditVisible.value = true
  ruleForm.value = {} as Permit
  addDataType.value = 'add'
}

/**
 * 修改弹出页面
 */
const editDialog = (row: Permit) => {
  addOrEditVisible.value = true
  ruleForm.value = row
  addDataType.value = 'edit'
}

const closeEditDialog = (e: any) => {
  addOrEditVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  ElMessageBox.confirm(
      '是否删除权限?',
      '提醒',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deletePermitById(id).then(res => {
      const code = res.code;
      if (code == 200) {
        ElMessage({
          message: '删除数据成功！',
          type: 'success',
        })
        initList();
      } else {
        ElMessage.error('删除数据失败！');
      }
    })
  }).catch(() => {
    // ElMessage({
    //   type: 'info',
    //   message: 'Delete canceled',
    // })
  })
}

onMounted(() => {
  initList()
})
</script>
